<template>
    <div>
        <h2>添加computer</h2>
        <p><input type="text" v-model="name" placeholder="电脑品牌"></p>
        <p><input type="text" v-model="price" placeholder="电脑价格"></p>
        <p><input type="text" v-model="model" placeholder="电脑处理器"></p>
        <p><input type="text" v-model="size" placeholder="电脑尺寸"></p>
        <p>
            <select v-model="cate">
                <option v-for="i in cates" :value="i.id" :key="i.id">{{i.name}}</option>
            </select>
        </p>
        <p><input type="file" @change="get_file($event)"></p>    
        <button @click="addcom()">添加</button>
    </div>    
</template>

<script>
import axios from "axios"
import {get_cateC} from "../axios_api/api.js"
export default {
    name:"addcom",
    data() {
        return {
            name:"",
            price:"",
            model:"",
            size:"",
            cate:"",
            cates:"",
        }
    },
    methods:{
        get_cate(){
            get_cateC().then(res=>{
                console.log(res)
                this.cates = res.data
            })
        },
        get_file(event){
            this.file = event.target.files[0]
        },
        addcom(){
            let formdata = new FormData()
            formdata.append("name",this.name)
            formdata.append("price",this.price)
            formdata.append("model",this.model)
            formdata.append("size",this.size)
            formdata.append("pic",this.file)
            formdata.append("cate",this.cate)
            axios({
                url:"http://127.0.0.1:8000/app02/com/",
                method:"post",
                data:formdata
            }).then(res=>{
                console.log(res.data)
            })
        }

    },
    created(){
        this.get_cate()
    }
}
</script>

<style>

</style>
